বুটস্ট্রাপ প্রোগ্রেস বার: প্রোগ্রেস বারের মাধ্যমে ইউজার জানতে পারে তার সম্পাদিত প্রক্রিয়াটি কতটুকু সম্পন্ন হয়েছে এবং কতটুকু বাকী রয়েছে।
বুটস্ট্রাপে বিভিন্ন ধরনের প্রোগ্রেস বার রয়েছে।
বুটস্ট্রাপ বেসিক প্রোগ্রেস বার তৈরি করার জন্য kt_satt_skill_example_id=962 লেভেলসহ একটি প্রোগ্রেস বার দেখতে নিম্নরুপঃ প্রোগ্রেস বারের পারসেন্টেজ প্রদর্শন করানোর জন্য kt_satt_skill_example_id=964 প্রোগ্রেস বারকে কালার করার জন্য কনটেকচুয়াল ক্লাসগুলো ব্যবহার করতে পারেন। এছাড়াও আপনি আপনার পছন্দ মতো কালার যুক্ত করার জন্য সিএসএসের সাহায্য নিন। কিভাবে কনটেকচুয়াল ক্লাসগুলো প্রোগ্রেস বারে ব্যবহার করা যায় তা নিচের উদাহরণে দেখানো হলোঃ kt_satt_skill_example_id=967 Striped প্রোগ্রেস বার দেখতে নিম্নরুপঃ Striped প্রোগ্রেস বার তৈরি করার জন্য kt_satt_skill_example_id=969 একটি "এনিমেশন" যুক্ত প্রোগ্রেস বারঃ এনিমেশন যুক্ত প্রোগ্রেস বার তৈরি করার জন্য kt_satt_skill_example_id=971 কয়েকটি প্রোগ্রেস বার মিলে একটি প্রোগ্রেস বার তৈরি করা যায়। একই kt_satt_skill_example_id=973 .progress
ক্লাস এবং তারমধ্যে অন্য একটি .progress-bar
ক্লাস ব্যবহার করুনঃনোটঃ প্রোগ্রেস বার ইন্টারনেট এক্সপ্লোরার(৯) এবং এর পূর্ববর্তী ভার্সনে সাপোর্ট করে না। কারন প্রোগ্রেস বারের ক্ষেত্রে এটি সিএসএস(৩) ট্রানজিশন এবং এনিমেশন এফেক্ট ব্যবহার করে।
নোটঃ স্ক্রিন রিডারদের পড়তে সাহায্য করার জন্য aria-* এট্রিবিউট ব্যবহার করুন।লেবেলসহ প্রোগ্রেস বার
.sr-only
ক্লাস বাদ দিনঃপ্রোগ্রেস বারের কালার
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
Striped প্রোগ্রেস বার
.progress-bar-striped
ক্লাস ব্যবহার করুনঃএনিমেশনযুক্ত প্রোগ্রেস বার
.progress-bar-striped
ক্লাসের সাথে .active
ক্লাস ব্যবহার করুনঃStacked প্রোগ্রেস বার
< div class="progress" >
এর মধ্যে একাধিক প্রোগ্রেস বার যুক্ত করে stacked প্রোগ্রেস বার তৈরি করা যায়ঃ
আরও দেখুন...